<script setup lang="ts">
import { ref } from 'vue';
import { useNurseStore } from '@/store';
import { storeToRefs } from 'pinia';
import { useNurseHelp } from '@/service';
import { hideLoading, showLoading, usePullDownRefresh, stopPullDownRefresh } from '@tarojs/taro';
import { IconFont } from '@nutui/icons-vue-taro';
import Taro from '@tarojs/taro';
import { useAuthStore } from '@/store';
import wxImage from '@/assets/img/qy.png';
import allImage from '@/assets/img/all.png';
import { localStg, PlatformUtils } from '@/utils';
import { useCustomHospitalEvent } from '@/composables/useHospitalEvent';
const { nurseUser } = storeToRefs(useAuthStore());

const { list } = useNurseHelp();

const { company, imageUrl } = storeToRefs(useNurseStore());
const defaultHospital = JSON.parse(Taro.getStorageSync('defaultHospital') || '{}');


// definePageConfig({
//     navigationBarTitleText: '客服中心',
//     enablePullDownRefresh: true
// });
const data = ref();
usePullDownRefresh(() => {
    getData();
    stopPullDownRefresh();
});

function handleGroup() {
    Taro.previewImage({
        urls: [groupImage.value]
    })
}

const groupImage = ref('https://anfine.huasun-healthcare.com/kefu/anhao-group.jpg');

async function getData() {
    showLoading({ title: '正在请求数据...' });

    const { error, success } = await list(`?column=createTime&order=asc&pageNo=1&pageSize=100`);

    if (!error && success?.records){
        data.value = success.records;
        console.log(data.value);
        // 从缓存数 defaultHospital 。根据对象的 sysOrgCode 前6位 == “A01A03” 就是安好，否则就是华声

        // 使用平台判断工具类
        const isHuaSheng = PlatformUtils.isHuaSheng();
        const sysOrgCode = PlatformUtils.getSysOrgCode();
        
        if(isHuaSheng){
            data.value.splice(0, 2, data.value[1], data.value[0]);
        }
        data.value.forEach((item: any) => {
            // 替换显示名称
            if(item.name.includes('安安')){
                item.displayName = item.name.replace(/安安/g, '安安客服专线');
            }
            else if(item.name.includes('安好')){
                item.displayName = item.name.replace(/安好/g, '安好客服专线');
            }
            else if(item.name.includes('行政院长')){
                item.displayName = item.name.replace(/行政院长/g, '今日值班领导');
            }
            else {
                item.displayName = item.name;
            }
            
            if(isHuaSheng){
                if(item.name.includes('安安')){
                    item.weixin = 'https://anfine.huasun-healthcare.com/kefu/anan.jpg';
                }
                else if(item.name.includes('安好')){
                    item.weixin = 'https://anfine.huasun-healthcare.com/kefu/anhao.jpg';
                }
                else if(item.name.includes('院长')){
                    item.weixin = 'https://anfine.huasun-healthcare.com/kefu/leader.jpg';
                }

                groupImage.value = 'https://anfine.huasun-healthcare.com/kefu/huasheng-group.jpg';
            }
            else{
                if(item.name.includes('安安')){
                    item.weixin = 'https://anfine.huasun-healthcare.com/kefu/anan-fine.png';
                }
                else if(item.name.includes('安好')){
                    item.weixin = 'https://anfine.huasun-healthcare.com/kefu/anhao-fine.png';
                }
                else if(item.name.includes('院长')){
                    item.weixin = 'https://anfine.huasun-healthcare.com/kefu/leader-fine.png';
                }
               
                groupImage.value = 'https://anfine.huasun-healthcare.com/kefu/anhao-group.jpg';
            }
        })
    }

    hideLoading();
}
getData();

// 医院数据变化处理函数
function handleHospitalChange(hospital: any) {
    getData();
}

// // 系统机构变化处理函数
// function handleSysOrgChange(data: any) {
//     getData();
// }

// 使用自定义医院事件监听
useCustomHospitalEvent(handleHospitalChange);

function handleWeixin(weixin: string) {
    Taro.previewImage({
        urls: [weixin]
    })
}

function handlePhone(phone: string) {
    Taro.makePhoneCall({
        phoneNumber: phone
    })
}

</script>
<template>
    <basic-layout>
        <view class="m_img w-full pos-fixed pos-left-0 pos-top-0"></view>
        <!-- <custom-navbar title="客服中心" showLeft /> -->
        <view class="w-375px text-primary flex-col-center justify-start m-t-60 m-b-2">
            <view class="m_card w-360px box-border px-[50rpx] h-75px b-rounded-5 flex items-center relative">
                <view class="font-bold" @tap="handlePhone(company.mobile || '400-1183662')">客服热线:{{ company.mobile || '400-1183662' }}</view>
                <view>{{ company.memo }}</view>
                <image :src="allImage" class="ml-auto w-[64rpx] h-[54rpx]" @tap="handleGroup" />
            </view> 
            <view v-for="item in data" class="w-360px">
                <view class="m_card b-rounded-3 shadow flex h-75px mt-2 flex-col justify-around items-start relative">
                    <view class="ml-6">{{ item.displayName || item.name }}</view>
                    <view class="ml-6 flex justify-start items-center">
                        <view>{{ item.phone }}</view>
                        <!-- <view class="ml-2">{{ item.contacts }}</view> -->
                        <view class="ml-2">
                            <nut-button type="primary" size="mini" @tap="handlePhone(item.phone)">拨打</nut-button>
                        </view>
                    </view>
                    <image :src="wxImage" @tap="handleWeixin(item.weixin)" class="!absolute right-[40rpx] top-[50rpx] w-[64rpx] h-[54rpx]" />
                    <!-- <IconFont @tap="handleWeixin(item.weixin)" size="40" color="#2b8e2f" font-class-name="iconfont" class-prefix="icon" name="weixin" class="!absolute right-[32rpx] top-[40rpx]" /> -->
                </view>
            </view>
        </view>
    </basic-layout>
</template>

<style lang="scss">
.m_img {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: 100% 100%;
    background-image: linear-gradient(to right, rgb(16, 185, 129), rgb(101, 163, 13));
}

.m_card {
    backdrop-filter: blur(10px) brightness(90%);
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
}
</style>
